<template>
  <div class="demo">
    <fieldset>
      <legend>单一节点</legend>
      名称：<input type="text" v-model="itemData.text">
      文字颜色：<input type="color" v-model="itemData.color">
      背景颜色：<input type="color" v-model="itemData.bgColor">
      有头结点：<input type="checkbox" v-model="itemData.hasHead">
      有尾结点：<input type="checkbox" v-model="itemData.hasTail">
      记录选中状态：<input type="checkbox" v-model="option.recordSelected"><br>
      撤销：Ctrl+Z &nbsp; 重做：Ctrl+Y &nbsp; 删除：Delete/Backspace<br>
      历史记录总数：{{ historyTotal }} &nbsp; 当前记录序数：{{ historyNum }}
      <hr>
      <yc-item :data="itemData" :option="option" @onload="initItem"></yc-item>
    </fieldset>
    <!-- <div>
      <node-view ref="nodeview"></node-view>
    </div>
    <container ref="container"></container> -->
    <yc-stage :height="500" :option="option" ref="stage" @onload="loadData" @history-change="historyChange"></yc-stage>
    <fieldset>
      <legend>全局置项</legend>
      <fieldset>
        <legend>节点</legend>
        高度：<input type="number" :min="0" v-model.number="option.node.height">
        水平内间距：<input type="number" :min="0" v-model.number="option.node.padding">
        字体大小：<input type="number" :min="1" v-model.number="option.node.fontSize">
        边框大小：<input type="number" :min="0" v-model.number="option.node.borderWidth">
        边框颜色：<input type="color" v-model="option.node.borderColor">
        边框圆角大小：<input type="number" :min="0" v-model.number="option.node.borderRadius">
      </fieldset>
      <fieldset>
        <legend>小圆点</legend>
        半径：<input type="number" :min="0" v-model.number="option.node.point.radius">
        背景颜色：<input type="color" v-model="option.node.point.bgColor">
        边框大小：<input type="number" :min="0" v-model.number="option.node.point.borderWidth">
        边框颜色：<input type="color" v-model="option.node.point.borderColor">
        光标移入后的边框颜色：<input type="color" v-model="option.node.point.hoverBorderColor">
      </fieldset>
      <fieldset>
        <legend>连线</legend>
        宽度：<input type="number" :min="1" v-model.number="option.line.lineWidth">
        虚线数组：<input type="text" v-model="option.line.dashArray">
        正常颜色：<input type="color" v-model="option.line.color">
        移入颜色：<input type="color" v-model="option.line.hoverColor">
        选中颜色：<input type="color" v-model="option.line.selectedColor">
      </fieldset>
      <fieldset>
        <legend>选框</legend>
        宽度：<input type="number" :min="1" v-model.number="option.frame.borderWidth">
        虚线数组：<input type="text" v-model="option.frame.dashArray">
        边框颜色：<input type="color" v-model="option.frame.borderColor">
      </fieldset>
      <hr>
    </fieldset>
  </div>
</template>

<script>
import YcStage from '../stage'
import YcItem from '../item'

export default {
  name: 'yc-drag-flow-demo',
  components: {
    YcStage,
    YcItem
  },
  props: {
    msg: String
  },
  data () {
    return {
      itemData: {
        text: '新节点', // 文本内容
        color: '#000000', // 文本颜色
        bgColor: '#409eff', // 背景颜色
        hasHead: true, // 是否有头节点
        hasTail: true // 是否有尾节点
      },
      option: {
        node: {
          height: 30, // 节点高度
          padding: 10, // 水平内间距
          fontSize: 16, // 字体大小
          borderWidth: 1, // 边框大小
          borderRadius: 3, // 边框圆角大小
          borderColor: '#5F4C0B', // 边框颜色
          selectedColor: '#000000', // 选中后的边框颜色
          point: {
            radius: 5, // 半径大小
            bgColor: '#999999', // 背景颜色
            borderWidth: 2, // 边框大小
            borderColor: '#666666', // 边框颜色
            hoverBorderColor: '#eeeeee' // 光标移入后的边框颜色
          }
        },
        line: {
          lineWidth: 3, // 线条宽度
          dashArray: '6, 6', // 虚线数组
          color: '#8F7E3D', // 正常颜色
          hoverColor: '#E3BB36', // 移入颜色
          selectedColor: '#000000' // 选中颜色
        },
        frame: {
          borderWidth: 3, // 边框宽度
          dashArray: 6, // 虚线数组
          borderColor: '#013ADF' // 边框颜色
        },
        recordSelected: true
      },
      stageData: {
        // nodes: [
        //   { id: 1, x: 100, y: 100, text: '新节点1', hasHead: true, hasTail: true, isSelected: false },
        //   { id: 2, x: 200, y: 200, text: '新节点2', hasHead: true, hasTail: true, isSelected: false }
        // ]
      },
      historyTotal: 0,
      historyNum: 0
    }
  },
  methods: {
    initItem (vm) {
      vm.init(this.$refs.stage)
    },
    loadData (vm) {
      vm.loadData(this.stageData)
    },
    historyChange (total, num) {
      this.historyTotal = total
      this.historyNum = num
    }
  },
  mounted () {}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  /deep/ .stage {
    border: 1px solid #999;
  }
  input[type=color] {
    width: 50px;
  }
  input[type=number] {
    width: 60px;
  }
  input[type=text] {
    width: 80px;
  }
</style>
